<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1" >
    <title>毕业设计</title>
     <style>
     .t_area{
		width:100%;/*自动适应父布局宽度*/ 
        overflow:auto; 
        word-break:break-all; 
	} 
	*{margin:0;padding:0}
	.yanz{width:400px;margin:50px auto}
	.tc{text-align:center}
	.yanz h2{font-size:18px;padding-bottom:40px}
	.shur-bj{background:#F9F9F9;padding:40px 30px;background-color:#F9F9F9;box-shadow:0 0 3px #EEE;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}
	.item{margin-bottom:15px}
	.inp{display:block;width:312px;height:30px;padding:6px 12px;font-size:14px;line-height:1.42857143;color:#555;background-color:#fff;background-image:none;border:1px solid #ccc;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075);-webkit-transition:border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;-o-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s}
	.rad{display:block;width:312px;height:15px;padding:6px 12px;font-size:14px;line-height:1.42857143;color:#555;background-color:#fff;background-image:none;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075);-webkit-transition:border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;-o-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s}
	.btn{background:#2CB9EA;border:1px solid #2CB9EA;color:#fff; width:100px; text-align:center;padding:12px 0px;font-size:18px;border-radius:4px;cursor:pointer;outline:0;width:100%}
	.btn:hover{background:#1698C5;border:1px solid #1698C5}
	.huoqu{background:#F9F9F9;border:1px solid #2CB9EA;color:#2CB9EA;padding:12px 10px;font-size:14px;border-radius:4px;cursor:pointer;outline:0}
	.huoqu:hover{background:#2CB9EA;color:#fff}
	.text{background:#5cb85c;color:#fff;display:inline-block;padding:15px 30px;text-decoration:none;border-radius:4px}
	#embed-captcha{width:300px;margin:0 auto}
	.show{display:block}
	.hide{display:none}
	#notice{color:red}
    </style>
    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <link href="/bootstrap-table/css/bootstrap-table.min.css" rel="stylesheet" />

    <script type="text/javascript" src="/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/bootstrap-table/js/bootstrap-table.min.js"></script>
    <script type="text/javascript" src="/bootstrap-table/js/locale/bootstrap-table-zh-CN.min.js"></script>
    <script type="text/javascript" src="/js/layer/layer.js"></script>
    <script type="text/javascript" src="/jquery-3.3.1.min.js"></script>
    <script src="/js/jquery.js"></script>
    <script src="/js/order.js"></script>
</head>
<body>
	
<div class="yanz">
        <div class="shur-bj">
        	<div class="tc" style="padding-bottom:30px">
        	<!-- <a href="http://www.ihuyi.com/" target="_blank"> -->
        	<input type="hidden" name="itemId" id="itemId" th:value="${itemId}" value="商品id"/>
        	<input type="hidden" name="marketId" id="marketId" value="活动id"/>
        	</div>
        
            <div class="popup">
            	<div id="marktDateId">
                    <div class="item">
                    	<label style="color: red;"></label>
                    </div>
                	 <div class="item">
                    	<label style="color: red;" id="marketDate"></label>
                	</div>
                </div>
                <div class="item">
                    <label  id="title"></label>
                </div>
                <div class="item">
                    <label>商品描述</label>
                </div>
                 <div class="item">
                 	<textarea class="t_area"  id="description"  rows=1 name=s1 cols=27   style="background-attachment: fixed; background-repeat: no-repeat; border-style: solid; border-color: #FFFFFF"></textarea>
                </div>
                <div id="normalPrice">
	                <div class="item">
	                    <label>价格</label>
	                </div>
	                 <div class="item">
	                    <label id="price"></label>
	                </div>
                </div>
                <div id="marktPriceId">
                    <div class="item">
                    	<label style="color: red;">秒杀价格</label>
                    </div>
                	 <div class="item">
                    	<label style="color: red;" id="marketPrice"></label>
                	</div>
                </div>
                <div class="item">
                    <img id="imgUrl" style="width: 200px;height: auto;"/>
                </div>
                <div class="item">
                    <label>销量</label>
                </div>
                <div class="item">
                    <label  id="titleSales"></label>
                </div>
                <div class="item">
                    <label>库存</label>
                </div>
                <div class="item">
      				<label id="titleStock"></label>
                </div>
                <input class="btn" id="embed-submit" type="button" value="下单" onclick="doCreateOrder()">
            </div>
        </div>
	</div>
</body>

<script type="text/javascript">
//定义全局商品信息数组
jQuery(document).ready(function(){
	var id = $("#itemId").val();
	$.ajax({
        url: "/getItem?id="+id,
        type: "GET",
        cache: false,
        success: function (data) {    //返回map
        	if (data.status == "success") {
                //获取成功的操作
        		itemVo=data.data;
        		reloadDom();
        		setInterval(reloadDom,1000);
             } else {
             	alert("获取商品信息失败,原因为: "+data.data);
             }
        }
        /*error:function (data) {
        	alert(data.);
        }*/
    })
    
    function reloadDom(){
		 $("#marketId").val(itemVo.marketId);
		 $("#title").text(itemVo.title);
         $("#description").text(itemVo.description);
         $("#titleStock").text(itemVo.stock);
         $("#price").text(itemVo.price);
         $("#imgUrl").attr("src",itemVo.imgUrl);
         $("#titleSales").text(itemVo.sales);
         $("#titleStock").text(itemVo.stock);
         if(itemVo.marketStatus == 0){
         	//商品秒杀活动状态: 0未开始  1正在进行 2已结束/没有
         	 var startTime = Date.parse(itemVo.marketStartDate);
         	 var nowTime = Date.parse(new Date());
         	 var delTime = (startTime-nowTime)/1000;
         	 if(delTime <= 0 ){
         		 //活动开始
         		itemVo.marketStatus = 1;
         		reloadDom();
         	 }
             $("#price").css("text-decoration", "line-through");   //穿过文本的线
             $("#marketDate").text("秒杀活动将于:  "+getDate(itemVo.marketStartDate)+"  开始售卖 倒计时: "+delTime+" 秒");
             $("#marketPrice").text(itemVo.marketPrice);
             $("#embed-submit").attr('disabled',true);
         	}else if(itemVo.marketStatus == 1){
         	 $("#marketDate").text("秒杀正在进行中......");
         	 setInterval(function(){
         		$("#marketDate").fadeOut(200).fadeIn(200);
         		},400);
         	 $("#marketPrice").text(itemVo.marketPrice);
         	 $("#embed-submit").attr('disabled',false);
         	 $("#normalPrice").hide();
          }else if(itemVo.marketStatus == 2){
        	 //没有秒杀活动或已经结束
        	  $("#marktDateId").hide();
        	  $("#marktPriceId").hide();
         }
	}
  //格式化日期
    function getDate(dateStr) {
        var date = new Date(dateStr).Format("yyyy-MM-dd hh:mm:ss");
        return date;
    }
    //格式化日期
    Date.prototype.Format = function (fmt) {
        var o = {
            "M+": this.getMonth() + 1,
            "d+": this.getDate(),
            "h+": this.getHours(),
            "m+": this.getMinutes(),
            "s+": this.getSeconds(),
        };
        if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o)
            if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
    }
})



</script>

</html>
